<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="日记"
        right-text="保存"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="onClickRight"
      />
    </header>
    <div class="content">
      <textarea name="" id="" cols="30" rows="10" placeholder="为这篇记录说点什么吧" v-model="text" ></textarea>
      <div class="record">
        <div class="record-top van-hairline--bottom" @click="show=true">
          <span>记录时间</span>
          <div class="time">
            <span>{{curtime}}</span>
            <img src="/img/icons1/icon_more.png" alt="">
          </div>
        </div>
        <div class="record-bot">
          <van-uploader v-model="fileList" multiple>
            <div slot="default"><img src="/img/home/note/icon_add.png" alt="">
          </div>
          </van-uploader>
        </div>
        <van-popup v-model="show" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            @confirm="settime"
            @cancel="show=false"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Toast, Card, SwipeCell, Button, Uploader, DatetimePicker, Popup } from 'vant'

Vue.use(NavBar)
Vue.use(Card)
Vue.use(SwipeCell)
Vue.use(Button)
Vue.use(Uploader)
Vue.use(DatetimePicker)
Vue.use(Popup)
export default {
  data () {
    return {
      text: '', // 文本域
      show: false,
      curtime: new Date().toLocaleDateString(),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      fileList: [
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' }
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ]
    }
  },
  methods: {
    onClickRight () {
      Toast('按钮')
      console.log(this.text)
      console.log(this.fileList)
    },
    settime (value) {
      this.curtime = value.toLocaleDateString()
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box {
  .header {
    @include rect(100%,.44rem);
    .van-nav-bar {// navbar样式
      background-color: #FCCE00;
      @include rect(100%,.44rem);
      /deep/.van-nav-bar__left {// 左按钮
        .van-icon {
          color: white;
          font-size: .17rem;
        }
      }
      /deep/.van-nav-bar__title{// title
        height: .44rem;
        color: #FFFFFF;
        font-size: .19rem;
        font-family:PingFang SC;
        font-weight:bold;
      }
      /deep/.van-nav-bar__text { // 右按钮
          color: #FFFFFF;
          font-size: .14rem;
          font-family:PingFang SC;
          font-weight:bold;
      }
    }
  }
  .content {
    background-color: rgb(242,242,242);
    textarea {
      width: 100%;
      height: 1.4rem;
      border: none;
      margin: .1rem 0;
      padding: .15rem;
      resize:none;
      text-indent: .14rem;
      font-size: .12rem;
    }
    .record {
      background-color: white;
      padding: 0 .22rem;
      height: 100%;
      .record-top {
        @include flexbox();
        @include justify-content(space-between);
        width: 100%;
        height: .35rem;
        align-items: center;
        span {
          font-size: .12rem;
          font-weight: bold;
          color: #333333;
        }
        .time {
          span {
            color: #999999;
            font-weight: 500;
          }
          img {
            width: .07rem;
            height: .12rem;
            margin-left: .1rem;
          }
        }
      }
      .record-bot {
        padding: .2rem 0;
        div {
          width: .6rem;
          height: .6rem;
          border:1px dashed rgba(242,242,242,1);
          border-radius:10px;
          text-align: center;
          line-height: .56rem;
          img {
            width: .2rem;
            height: .2rem;
          }
        }
        // 图片上传
        /deep/.van-uploader {
          .van-uploader__wrapper {
            width: 3.75rem;
            .van-uploader__preview-image {
              width: .6rem;
              height: .6rem;
            }
          }
        }
      }
    }
  }
}
</style>
